<template>
  <div class="loginPage">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="登录" name="login">
        <el-form
          :model="loginForm"
          status-icon
          :rules="loginRules"
          ref="loginForm"
          label-width="100px"
        >
          <el-form-item label="手机号" prop="phone">
            <div class="iptphone">
              <el-input
                type="text"
                v-model="loginForm.phone"
                placeholder="请输入手机"
                autocomplete="off"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              placeholder="请输入密码"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <el-form
          :model="registerForm"
          status-icon
          :rules="registerRules"
          ref="registerForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="手机号" prop="phone">
            <div class="iptphone">
              <el-input
                type="text"
                v-model="registerForm.phone"
                placeholder="请输入手机"
                autocomplete="off"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="registerForm.password"
              placeholder="请输入密码"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="registerUser('registerForm')"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { login as apilogin } from "@/api";
import { SET_LOCAL_ITEM } from "@/utils/utils";
export default {
  data() {
    function checkPhone(rule, value, callback) {
      let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (reg.test(value)) {
        callback();
      } else {
        rule.message = "手机格式有误";
        callback(new Error());
      }
    }
    return {
      activeName: "login",
      // 表单数据源
      loginForm: {
        phone: "13226803206",
        password: "123",
      },
      // 表单数据源
      registerForm: {
        phone: "",
        password: "",
      },
      // 表单验证规则
      loginRules: {
        phone: [
          {
            required: true,
            validator: checkPhone,
            message: "请输入手机号码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      registerRules: {
        phone: [
          {
            required: true,
            validator: checkPhone,
            message: "请输入手机号码",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    registerUser(formname) {
      this.$refs[formname].validate(async (valid) => {
        if (valid) {
          this.$message({
            message: "请前往管理台注册哦",
          });
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submitForm(formname) {
      // 调用 el-form 组件实例的 validate 方法, 并且在回调形参
      // 上 获取到表单验证结果;
      this.$refs[formname].validate(async (valid) => {
        if (valid) {
          let res = await apilogin(this.loginForm);
          let token = res.data.result.token;
          SET_LOCAL_ITEM("token", token);
          this.$message({
            type: "success",
            message: "登录成功",
            duration: 1000,
          });
          // 登录后更新用户个人信息到vuex内
          this.$store.dispatch("get_user_info");

          setTimeout(() => {
            this.$router.push("/");
          }, 1000);
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.loginPage {
  background-image: url("https://oss.casiostore.com.cn/advertisings/5f6bfedbb9128.jpg");
  @include fullPage;
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: 110%;
  min-width: 1200px;
  position: relative;
}
.el-tabs {
  position: absolute;
  right: 10%;
  top: 30%;
  width: 370px;
  box-shadow: 0 0 20px skyblue;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba($color: #ffffffd7, $alpha: 0.95);
}
::v-deep .el-input__inner {
  font-size: 20px;
}
</style>